<template>
	<view class="login">
		<view class="sms-login" :class="{'show': activeFm == 1, 'hide': activeFm != 1}">
			<view class="pl-header">
				<view class="title">登录后更精彩</view>
				<view class="explain">让找车更省心 让用车更放心！</view>
			</view>

			<u-form :model="smsfm.ps" :ref="smsfm.fname" :rules="smsfm.rules" :error-type="['message']" class="pl-fm">
				<u-form-item prop="lphone" :label-position="'top'">
					<u-input type="number" v-model="smsfm.ps.lphone" placeholder="请输入手机号码" maxlength="11" />
					<text slot="right" :class="{'c-qgreen': !smsfm.scode.state}"
						@click="getCode">{{smsfm.scode.tips}}</text>
				</u-form-item>

				<u-form-item prop="smsCode" :label-position="'top'">
					<u-input type="number" v-model="smsfm.ps.smsCode" placeholder="请输入手机动态码" maxlength="6" />
				</u-form-item>
			</u-form>

			<view class="sub-btns">
				<u-button type="success" hover-class="none" @click="onSmsSubmit" :loading="smsfm.sb.load"
					:custom-style="{'background': '#00c3ce'}">
					{{smsfm.sb.text}}
				</u-button>

				<!-- <u-button
					type="warning" 
					hover-class="none"
					@click="cancelLogin">
					暂不登录
				</u-button> -->
			</view>

			<!-- <view class="pl-agree">
				<text>
					登录即同意
					<text class="agree-title">《客车帮用户协议》</text>
					及
					<text class="agree-title">《客车帮隐私政策》</text>
				</text>
			</view> -->

			<view class="pl-agree">
				<text style="text-decoration:underline;margin-top: 15rpx;font-size: 35rpx;" class="change-login"
					@click="changeActiveFm(2)">切换账号密码登录</text>
			</view>

			<u-verification-code seconds="60" ref="scodeTl" @change="codeChange" @end="endScode"></u-verification-code>
		</view>

		<view class="pass-login" :class="{'show': activeFm != 1, 'hide': activeFm == 1}">
			<view class="pl-header">
				<view class="title">登录后更精彩</view>
				<view class="explain">让找车更省心 让用车更放心！</view>
			</view>

			<u-form :model="passfm.ps" :ref="passfm.fname" :rules="passfm.rules" :error-type="['message']"
				class="pl-fm">
				<u-form-item prop="lphone" :label-position="'top'">
					<u-input type="number" v-model="passfm.ps.phone" placeholder="请输入手机号码" maxlength="11" />
				</u-form-item>

				<u-form-item prop="lpass" :label-position="'top'">
					<u-input type="password" v-model="passfm.ps.loginPass" placeholder="请输入登录密码" maxlength="18" />
				</u-form-item>
			</u-form>

			<view class="sub-btns">
				<u-button type="success" @click="onPassSubmit" :loading="passfm.sb.load"
					:custom-style="{'background': '#00c3ce'}">
					{{passfm.sb.text}}
				</u-button>

				<!-- <u-button
					type="warning" 
					@click="cancelLogin">
					暂不登录
				</u-button> -->
			</view>

			<!-- <view class="pl-agree">
				<text>
					登录即同意
					<text class="agree-title">《客车帮用户协议》</text>
					及
					<text class="agree-title">《客车帮隐私政策》</text>
				</text>
			</view> -->

			<!-- 		<view class="pl-agree">
				<text style="text-decoration:underline;margin-top: 15rpx;font-size: 35rpx;" class="change-login" @click="changeActiveFm(1)">切换手机登录</text>
			</view> -->
		</view>


		<u-modal title="温馨提示" :confirm-style="{'color': '#00c3ce'}" v-model="useTipMd.show" :show-cancel-button="true"
			@confirm="onConfm">
			<view class="c-yellow" :style="{'padding': '20rpx'}">
				用户您好，为保证您能正常体验一些功能，请对该App开启定位服务、通知服务，谢谢！
			</view>
		</u-modal>
		<u-modal :show-confirm-button='false' v-model="show_chushihua" :content="'账号第一次登录正在初始化,请耐心等待几秒...'"></u-modal>
		<u-picker :show="login_show" :columns="login_columns"></u-picker>
		<u-picker @cancel='login_cancel' @confirm='login_confirm' v-model="login_show" mode="selector"
			:default-selector="[0]" :range="selector" range-key="companyName"></u-picker>
		<u-modal @confirm='longin_confirm' v-model="longin_model" :content="longin_text"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				longin_model: false,
				longin_text: '',
				show_chushihua: false,
				selector: [],
				login_show: false,
				// 使用提示弹框
				useTipMd: {
					show: false
				},
				// 当前表单
				activeFm: 2,
				// 短信登录表单
				smsfm: {
					fname: 'smsLoginFm',
					sb: {
						load: false,
						text: '立即登录'
					},
					// 短信验证码
					scode: {
						// 文本提示
						tips: '',
						// 状态
						state: true,
					},
					ps: {
						// 登录设备
						// device: 'WX_MP',
						// 车队编号
						// teamNo: '',
						// 用户openid
						wxid: '',
						// 登录角色
						// lrole: 'TEAM_DRIVER',
						// 登录手机号
						lphone: '',
						// 手机动态码
						smsCode: '',
						// 设备cid
						// mobileCid: uni.getStorageSync('lcid') || ''
					},
					rules: {
						lphone: [{
								required: true,
								message: '请输入手机号',
								trigger: ['change', 'blur'],
							},
							{
								validator: (rule, value, callback) => {
									return this.$u.test.mobile(value);
								},
								message: '手机号码不正确',
								trigger: ['change', 'blur'],
							}
						],
						smsCode: [{
								required: true,
								message: '请输入手机动态码',
								trigger: ['change', 'blur'],
							},
							{
								pattern: /^[0-9]{6}$/,
								message: '由6位纯数字组成',
								trigger: ['change', 'blur'],
							}
						],

					},
				},


				// 密码登录表单
				passfm: {
					fname: 'passLoginFm',
					sb: {
						load: false,
						text: '立即登录'
					},
					ps: {
						// 登录设备
						// device: 'WX_MP',
						// 车队编号
						// teamNo: '',
						// 用户openid
						wxid: '',
						// 登录角色
						// lrole: 'TEAM_DRIVER',
						// 登录手机号
						phone: '',
						// 登录密码
						loginPass: '',
						miniType: '1',
						companyNum: '',

						// 设备cid
						// mobileCid: uni.getStorageSync('lcid') || ''
					},
					rules: {
						phone: [{
								required: true,
								message: '请输入手机号',
								trigger: ['change', 'blur'],
							},
							{
								validator: (rule, value, callback) => {
									return this.$u.test.mobile(value);
								},
								message: '手机号码不正确',
								trigger: ['change', 'blur'],
							}
						],
						loginPass: [{
								required: true,
								message: '请输入登录密码',
								trigger: ['change', 'blur'],
							},
							{
								pattern: /^[\.A-Za-z0-9_-]{6,18}$/,
								message: '需由大小写字母、数字、.、_组成，长度在6-18之间',
								trigger: ['change', 'blur']
							}
						],

					},
				},

			}
		},
		// 返回按钮周期函数
		onBackPress() {
			uni.navigateTo({
				url: '/pages/common/index/index'
			});
			return true;
		},
		onLoad() {
			// // 初始化数据
			// let luser = {
			// 	// 登录设备
			// 	// device: 'WX_MP',
			// 	// 车队编号
			// 	// teamNo: '8112010001',
			// 	// 用户openid
			// 	wxid: '',
			// 	// 登录角色
			// 	// lrole: 'TEAM_DRIVER',
			// 	// 登录手机号
			// 	lphone: '17828028717',
			// 	// 设备cid
			// 	// mobileCid: uni.getStorageSync('lcid') || ''
			// };
			// this.smsfm.ps =  {...luser, smsCode: ''};
			// this.passfm.ps = {...luser, lpass: '123456'};
		},
		onReady() {
			const that = this;

			// 初始化-手机表单验证
			that.$refs[that.smsfm.fname].setRules(that.smsfm.rules);

			// 初始化-账号表单验证
			that.$refs[that.passfm.fname].setRules(that.passfm.rules);
		},
		methods: {
			// 暂不登录
			cancelLogin() {
				uni.reLaunch({
					url: '../index/index'
				});
			},
			// 切换表单
			changeActiveFm(activId) {
				const that = this;

				that.activeFm = activId;
			},
			// 验证码文本改变
			codeChange(text) {
				this.smsfm.scode.tips = text;
			},
			// 获取验证码
			getCode() {
				const that = this,
					U = that.U;

				if (that.$refs.scodeTl.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					});
					that.$u.api.sendSmsCode({
						lphone: that.smsfm.ps.lphone
					}).then(res => {
						if (res.code == 1) {
							// 这里此提示会被this.start()方法中的提示覆盖
							U.qinfo('短信发送成功');

							that.smsfm.scode.state = false;

							// 通知验证码组件内部开始倒计时
							that.$refs.scodeTl.start();
						} else {
							U.qerror(res.msg);
						}
					});
				}
			},
			// 结束验证码
			endScode() {
				this.smsfm.scode.state = true;
			},
			// 手机-提交表单
			onSmsSubmit() {
				let that = this,
					U = that.U,
					ps = U.scopy(that.smsfm.ps),
					sb = that.smsfm.sb;
				console.log('提交cid', ps.mobileCid);
				that.$refs[that.smsfm.fname].validate((valid) => {
					if (!valid) {
						return false;
					} else {
						sb.load = true;
						that.$u.api.smsLogin(ps).then((res) => {
							sb.load = false;

							if (res.code == 1) {
								// 保存登录用户uuid
								uni.setStorageSync(that.C.uuid, res.uuid);
								// 获取登录用户信息
								that.$u.api.getLUserInfo({}).then(res => {
									if (res.code == 1) {
										// 保存登录用户信息
										uni.setStorageSync('isTrustee', res.data.company.isTrustee);
								
										
									}
								});
								that.$u.api.getLuserInfo({}).then(res => {
									if (res.code == 1) {
										// 保存登录用户信息
										uni.setStorageSync(that.C.luser, res.data);
										// 设置-主驾车辆
										if (res.data.plateNum) {
											let myCar = uni.getStorageSync(that.C.my_car);
											// 未设置主驾，才重新设置
											if (!myCar) uni.setStorageSync(that.C.my_car, res.data
												.plateNum);
										}

										// #ifdef MP-WEIXIN
										// 跳转到tabbar主页
										uni.switchTab({
											url: '/pages/tabbar/order-list/order-list'
										});
										// #endif

										// #ifdef APP-PLUS
										that.useTipMd.show = true;
										// #endif
									}
								});
							} else {
								U.qerror(res.msg);
							}
						});
					}
				});
			},


			login_confirm(e) {
				let that = this,
					U = that.U,
					ps = U.scopy(that.passfm.ps),
					sb = that.passfm.sb;
				ps.companyNum = that.selector[e].companyNum
				that.$u.api.passLogin(ps).then((res) => {
					sb.load = false;

					if (res.code == 1) {
						// 保存登录用户uuid
						uni.setStorageSync(that.C.uuid, res.data.token);
						uni.setStorageSync('lrole', res.data.luser.lrole);
						uni.setStorageSync('staffState', res.data.luser.staffState);
						// uni.switchTab({
						// 	url: '/pages/tabbar/order-list/order-list'
						// });
						if (res.data.luser.checkCarTips || res.data.luser.buySafeTips) {
							if (res.data.luser.checkCarTips) {
								that.longin_text = res.data.luser.checkCarTips
							}
							if (res.data.luser.buySafeTips) {
								that.longin_text += res.data.luser.buySafeTips
							}
							uni.setStorageSync('longin_text', that.longin_text);
							that.longin_model = true
						} else {
							// 获取登录用户信息
							that.$u.api.getLUserInfo({}).then(res => {
								if (res.code == 1) {
									// 保存登录用户信息
									uni.setStorageSync('isTrustee', res.data.company.isTrustee);
							
									
								}
							});
							that.$u.api.getLuserInfo({}).then(res => {
								if (res.code == 1) {
									// 保存登录用户信息
									uni.setStorageSync(that.C.luser, res.data);
									// 设置-主驾车辆
									if (res.data.plateNum) {
										let myCar = uni.getStorageSync(that.C.my_car);
										// 未设置主驾，才重新设置
										if (!myCar) uni.setStorageSync(that.C.my_car, res.data.plateNum);
									}

									// #ifdef MP-WEIXIN
									// 跳转到tabbar主页
									uni.switchTab({
										url: '/pages/tabbar/order-list/order-list'
									});
									// #endif

									// #ifdef APP-PLUS
									that.useTipMd.show = true;
									// #endif
								} else {
									if (res.code == -1) {
										// uni.setStorageSync('tishi', res.msg);
										// uni.navigateTo({
										// 	url: '../ti-shi/ti-shi'
										// });
										that.show_chushihua = true
										let tiem = null
										tiem = setTimeout(() => {
											that.show_chushihua = false
											uni.showToast({
												title: '初始化成功请重新登录',
												duration: 1000,
												icon: 'none'
											});
											clearTimeout(tiem)
										}, 10000);

									} else {
										U.qalert(res.msg);
									}
								}
							});

						}


					} else {
						U.qerror(res.msg);
					}
				});
			},
			longin_confirm(){
				let that = this
				that.longin_model = false
				// 获取登录用户信息
				that.$u.api.getLUserInfo({}).then(res => {
					if (res.code == 1) {
						// 保存登录用户信息
						uni.setStorageSync('isTrustee', res.data.company.isTrustee);
				
						
					}
				});
				that.$u.api.getLuserInfo({}).then(res => {
					if (res.code == 1) {
						// 保存登录用户信息
						uni.setStorageSync(that.C.luser, res.data);
						// 设置-主驾车辆
						if (res.data.plateNum) {
							let myCar = uni.getStorageSync(that.C.my_car);
							// 未设置主驾，才重新设置
							if (!myCar) uni.setStorageSync(that.C.my_car, res.data.plateNum);
						}
				
						// #ifdef MP-WEIXIN
						// 跳转到tabbar主页
						uni.switchTab({
							url: '/pages/tabbar/order-list/order-list'
						});
						// #endif
				
						// #ifdef APP-PLUS
						that.useTipMd.show = true;
						// #endif
					} else {
						if (res.code == -1) {
							// uni.setStorageSync('tishi', res.msg);
							// uni.navigateTo({
							// 	url: '../ti-shi/ti-shi'
							// });
							that.show_chushihua = true
							let tiem = null
							tiem = setTimeout(() => {
								that.show_chushihua = false
								uni.showToast({
									title: '初始化成功请重新登录',
									duration: 1000,
									icon: 'none'
								});
								clearTimeout(tiem)
							}, 10000);
				
						} else {
							U.qalert(res.msg);
						}
					}
				});
				
			},
			login_cancel() {
				let that = this,
					U = that.U,
					ps = U.scopy(that.passfm.ps),
					sb = that.passfm.sb;
				U.qerror('已取消登录');
				sb.load = false;
			},
			// 账号-提交表单
			onPassSubmit() {
				let that = this,
					U = that.U,
					ps = U.scopy(that.passfm.ps),
					sb = that.passfm.sb;

				console.log('提交cid', ps.mobileCid);
				that.$refs[that.passfm.fname].validate((valid) => {
					if (!valid) {
						return false;
					} else {
						sb.load = true;
						that.$u.api.getCompanyByPhone({
							loginPhone: ps.phone
						}).then((res) => {
							if (res.code == 1) {
								if (res.data.length > 0) {
									that.login_show = true
									that.selector = res.data
								} else {
									sb.load = false;
									U.qerror('单位为空，请联系管理');
								}

							} else if (res.code == -1) {
								// uni.setStorageSync('tishi', res.msg);
								// uni.navigateTo({
								// 	url: '../ti-shi/ti-shi'
								// });
								that.show_chushihua = true
								let tiem = null
								tiem = setTimeout(() => {
									that.show_chushihua = false
									uni.showToast({
										title: '初始化成功请重新登录',
										duration: 1000,
										icon: 'none'
									});
									clearTimeout(tiem)
								}, 10000);
							} else {
								U.qerror(res.msg);
							}

						});
					}


				});

			},
			// login_api() {
			// 	let that = this,
			// 		U = that.U,
			// 		ps = U.scopy(that.passfm.ps),
			// 		sb = that.passfm.sb;

			// },
			// 点击确定跳转页面
			onConfim() {
				that.useTipMd.show = false;
				// 跳转到tabbar主页
				uni.switchTab({
					url: '/pages/tabbar/order-list/order-list'
				});
			},

		}
	}
</script>

<style lang="less">
	@import '@/common/css/common.less';

	.login {
		width: 100%;
		padding: 30rpx 60rpx 0px 60rpx;

		.show {
			display: block !important;
		}

		.hide {
			display: none !important;
		}

		.pl-header {
			margin-bottom: 100rpx;

			.title {
				font-size: 48rpx;
				font-weight: 600;
				letter-spacing: 4rpx;
				color: #333333;
				padding-bottom: 16rpx;
			}

			.explain {
				font-size: 26rpx;
			}
		}

		.pl-fm {}

		.sub-btns {
			text-align: center;
			margin-top: 40rpx;
			// display: flex;
			// justify-content: space-around;
		}

		.pl-agree {
			margin-top: 10rpx;
			font-size: 24rpx;

			.agree-title {
				color: @mainColor;
			}

			.change-login {
				color: #999;
				font-size: 28rpx;
			}
		}
	}
</style>

<style lang="scss">
	.login {
		u-form {
			.u-form-item {
				border-bottom: 1px solid #bbb;

				.u-input {

					.u-input__input {
						color: #333333;
						font-size: 32rpx;
					}
				}
			}
		}
	}
</style>